<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        关于VueComponent:
           1.school组件本质是一个名为VueComponent的构造函数,且不是程序员自定义的,是Vue.extend生成的.
           
           2.我们只需要写<school></school>或</school>,Vue解析时会帮我们创建school组件的实例对象
             即Vue帮我们执行:new VueComponent(options)
         
           3.特别注意:每次调用Vue.extend 返回的都是一个全新的VueComponent!(底层使用的是函数return返回最新值,所以组件被复用时 数据不会存在引用问题)
           
           4.关于this指向:
             (1).组件配置中:
                  data函数、methods中的函数、watch中的函数、computed中的函数,他们的this皆指向VueComponent实例对象 即vc
             (2).new Vue()配置中:
               data函数、methods中的函数、watch中的函数、computed中的函数,他们的this皆指向Vue实例对象 即vm

            5.VueComponent的实例对象 以后简称vc即组件实例对象
              Vue的实例对象简称vm
            6.vc与vm的区别:
                组件实例对象就是小型vm 为什么这么说呢？因为:
               (1).vc不可指定容器
               (2).组件实例对象里的data必须配置为函数,其他一致。
         
                 
           
     -->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
    <script>
        const school = Vue.extend({
            name: 'mycomponent',
            template: `
            <div>
                <h1>学校名称:{{name}}</h1>
                <h2>学生名字:{{student}}</h2>
                <button @click="showName">点我弹出学校名</button>
                </div>
            `,
            data() {
                return {
                    name: 'B站大学',
                    student: '陈嘉兴'
                }
            },
            methods: {
                showName() {
                    console.log(this);
                    alert(this.name)
                }
            }
        })
        const test = Vue.extend({
            template: `<h2>pink</h2>`,
        })
        const hello = Vue.extend({
            template: `<div>
                <h2>{{msg}}</h2>
                     <test></test>
                </div>`,
            data() {
                return {
                    msg: '你好'
                }
            },
            components: {
                test
            }
        })

        const vm = new Vue({
            el: '#root',
            components: {
                school: school,
                hello: hello

            }
        })
    </script>

</body>

</html>